// 缴费信息
<template>
  <div>
    <div v-if="see">
      <div>
        <!-- 查询搜索框 -->
        <span style="display: inline-block">
          <el-form :inline="true" :model="selectfrom" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input
                v-model="selectfrom.name"
                placeholder="姓名"
                style="width: 140px"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="班级">
              <el-select
                v-model="selectfrom.classname"
                placeholder="班级名"
                style="width: 100px"
                clearable
              >
                <el-option
                  v-for="(item, index) in class_list"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-tooltip
                class="item"
                effect="dark"
                content="通过姓名与班级名进行查询"
                placement="bottom-start"
              >
                <el-button
                  type="primary"
                  @click="nameselect(selectfrom.name, selectfrom.classname)"
                  >缴费查询</el-button
                >
              </el-tooltip>
            </el-form-item>
          </el-form>
        </span>

        <el-pagination
          style="display:inline-block; "
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
        <span style="display: inline-blockl; width:100px"></span>
        <span style="display: inline-block">
          <el-tooltip
            class="item"
            effect="dark"
            content="添加新生的缴费信息"
            placement="bottom-start"
          >
            <el-button type="primary" class="addbutton" @click="addpay()"
              >添加信息</el-button
            >
          </el-tooltip>
        </span>
      </div>
      <div>
        <!-- 查询完的表格 -->
        <el-table :data="student_list" stripe style="width: 100%" height="580">
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="amount" label="应缴费金额" width="180">
          </el-table-column>
          <el-table-column prop="pay" label="已缴费金额" width="180">
          </el-table-column>
          <el-table-column prop="arrears" label="剩余金额" width="180">
          </el-table-column>
          <el-table-column prop="payaway" label="支付方式" width="180">
          </el-table-column>
          <el-table-column prop="" label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-search"
                type="text"
                @click="
                  updatepay(
                    scope.row.sid,
                    scope.row.name,
                    scope.row.amount,
                    scope.row.pay,
                    scope.row.arrears,
                    scope.row.payaway
                  )
                "
                ><i class="el-icon-edit">编辑</i></el-button
              >
              <el-button
                icon="el-icon-delete"
                type="text"
                @click="deletepay(scope.row.sid)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加学员缴费信息 -->
      <el-dialog title="添加学员缴费信息" :visible.sync="dialogAdd">
        <el-form ref="addstudent" :model="addstudent" :rules="rules">
          <el-form-item label="学员名称" prop="name">
            <el-input
              v-model="addstudent.name"
              autocomplete="off"
              placeholder="请输入在读学员的姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="应缴费金额" prop="amount">
            <el-input
              v-model="addstudent.amount"
              autocomplete="off"
              placeholder="应缴费金额"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="现缴费金额" prop="pay">
            <el-input
              v-model="addstudent.pay"
              autocomplete="off"
              placeholder="现缴费金额"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="缴费方式" prop="payaway">
            <el-select
              v-model="addstudent.payaway"
              placeholder="请选择缴费方式"
              clearable
            >
              <el-option label="现金" value="现金"></el-option>
              <el-option label="支付宝" value="支付宝"></el-option>
              <el-option label="微信" value="微信"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addstudents('addstudent')"
            >立即添加</el-button
          >
          <el-button @click="qx">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 修改学员缴费信息 -->
      <el-dialog title="修改学员缴费信息" :visible.sync="dialogUpdate">
        <el-form ref="updatestudent" :model="scope" :rules="rules">
          <el-form-item label="学员名称" prop="name">
            <el-input
              v-model="scope.name"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="应缴费金额" prop="amount">
            <el-input
              v-model="scope.amount"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="已缴费金额" prop="pay">
            <el-input
              v-model="scope.pay"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="现缴费金额" prop="digit">
            <el-input
              v-model="scope.paying"
              autocomplete="off"
              placeholder="现缴费金额"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="缴费方式" prop="payaway">
            <el-select v-model="scope.payaway" :disabled="true"> </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updatepays('updatestudent')"
            >立即修改</el-button
          >
          <el-button @click="dialogUpdate = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "stubasic",
  inject: ["reload"],
  data() {
    return {
      rules: {
        amount: [
          { required: true, message: "请输入阿拉伯数字", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: "金额不合法" },
        ],
        pay: [
          { required: true, message: "请输入阿拉伯数字", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: "金额不合法" },
        ],
      },
      form: [],
      selectfrom: {
        name: "",
        sex: "",
        classname: "",
        school: "",
      },
      addstudent: {
        name: "",
        amount: "",
        pay: "",
      },
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      pageTotal: 0, //所有页总条数
      studentselect: [],
      student: {},
      student_list: [],
      scope: {
        sid: "",
        name: "",
        amount: "",
        pay: "",
        arrears: "",
        payaway: "",
        paying: "",
      },
      see: true,
      seen: false,
      dialogAdd: false,
      dialogUpdate: false,
      // pageIndex
      // pageSize
    };
  },
  name: "stubasic",
  inject: ["reload"],
  data() {
    return {
      rules: {
        digit: [
          { required: true, message: "请输入阿拉伯数字", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: "金额不合法" },
        ],
      },
      form: [],
      selectfrom: {
        name: "",
        sex: "",
        classname: "",
        school: "",
      },
      addstudent: {
        name: "",
        amount: "",
        pay: "",
      },
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      pageTotal: 0, //所有页总条数
      studentselect: [],
      student: {},
      student_list: [],
      class_list: {},
      scope: {
        sid: "",
        name: "",
        amount: "",
        pay: "",
        arrears: "",
        payaway: "",
        paying: "",
      },
      see: true,
      seen: false,
      dialogAdd: false,
      dialogUpdate: false,
      // pageIndex
      // pageSize
    };
  },

  created() {
    this.pagedown();
    var that = this;
    this.axios(
      "http://192.168.2.225:8080/com.huidian.rem/FindClassBystatus"
    ).then(function(res) {
      that.list = res.data;
      console.log(that.list);
      that.class_list = that.list;
      console.log(that.class_list.length);
      console.log("asdsadasd");
      // console.log(that.student_list)
      // console.log("dddd")
    });
  },
  methods: {
    qx() {
      var that = this;
      that.dialogAdd = false;
      var addstudent = this.addstudent;

      (addstudent.name = ""), (addstudent.amount = ""), (addstudent.pay = "");
      console.log(addstudent);
    },
    nameselect(name, classname) {
      // this.student_list
      console.log(name);
      console.log(classname);
      this.axios({
        method: "post",
        url: "http://192.168.2.225:8080/com.huidian.rem/FindPaymentByname",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: JSON.stringify({
          name,
          classname,
        }),
      })
        .then((res) => {
          console.log(res);
          console.log("aaaaaaaaaaa");
          var that = this;
          that.student_list = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updatepays(formName) {
      console.log("updatepays");
      var that = this.scope;
      var sid = that.sid;
      var pay = that.paying;
      // console.log(amount);
      // console.log(pay);
      var date = this.getdate();

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogAdd = false;
          this.axios({
            method: "post",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            url: "http://192.168.2.225:8080/com.huidian.rem/UpdatePayment",
            data: JSON.stringify({
              pay: pay,
              sid: sid,
            }),
          }).then((res) => {
            console.log(res);

            this.$message.success("修改成功");
            this.reload();
          });
        } else {
          this.dialogUpdate = true;
          alert("请按照规矩把信息填写完整");
          return false;
        }
      });
    },
    updatepay(sid, name, amount, pay, arrears, payaway) {
      var that = this;
      that.dialogUpdate = true;
      var aaa = this.scope;
      aaa.sid = sid;
      (aaa.name = name),
        (aaa.amount = amount),
        (aaa.pay = pay),
        (aaa.arrears = arrears),
        (aaa.payaway = payaway);
    },
    // 删除学生
    deletepay: function(sid) {
      console.log(sid);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios({
            method: "post",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            url: "http://192.168.2.225:8080/com.huidian.rem/DeletePayment",
            data: JSON.stringify({
              sid: sid,
            }),
          }).then((res) => {
            console.log(res);
            this.$message.success("删除成功");
            this.reload();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 当前时间
    getdate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + "-" + month + "-" + strDate;
      return currentdate;
    },

    // 向数据库发送
    addstudents: function(formName) {
      console.log("addstudent");
      var that = this.addstudent;
      var name = that.name;
      var amount = that.amount;
      var pay = that.pay;
      var payaway = that.payaway;
      console.log(name);
      // console.log(amount);
      // console.log(pay);
      var date = this.getdate();

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogAdd = false;
          this.axios({
            method: "post",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            url: "http://192.168.2.225:8080/com.huidian.rem/AddPayment",
            data: JSON.stringify({
              name: name,
              amount: amount,
              pay: pay,
              date: date,
              payaway: payaway,
            }),
          }).then((res) => {
            console.log(res);
            if (res.data != 1) {
              this.$message.error("没有找到这个学员或已有这个学员");
            } else {
              this.$message.success("添加成功");
              this.reload();
            }
          });
        } else {
          this.dialogAdd = true;
          alert("请按照规矩把信息填写完整");
          return false;
        }
      });
    },
    // 添加学员信息
    addpay: function() {
      var that = this;
      that.dialogAdd = true;
      console.log("dddddd");
    },
    // 翻页
    pagedown: function(asd) {
      console.log("qqqqqqqqqqqqq");
      var that = this;
      var pageIndex = that.currentPage;
      var pageSize = that.pagesize;
      this.axios({
        method: "post",
        url: "http://192.168.2.225:8080/com.huidian.rem/FindAllPayment",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: JSON.stringify({
          // 传值
          pageIndex: pageIndex,
          pageSize: pageSize,
        }),
      })
        .then((res) => {
          console.log("asd");
          console.log(asd);
          console.log("asd");

          that.student_list = res.data;

          if (asd != 2) {
            that.pageTotal = res.data.length;
          }
          console.log(this.pageTotal);
          console.log("pagetotal");
        })
        .catch((error) => {
          console.log(error);
          console.log("错误");
        });
    },
    handleSizeChange: function(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
      this.pagedown(2);
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.pagedown(2);
    },
  },
};
</script>
<style scoped>
.addbutton {
  background-image: linear-gradient(
    to bottom right,
    white,
    pink,
    #f5deb3,
    pink,
    white
  );
  border: 0px;
}
</style>
